<template>
	<view class="my-picker flexc">
		<view class="picker-title flexr align-center justify-center">
			请选择导购员
			<image class="close" src="@/static/close.png" @click="emits('onCancel')"></image>
		</view>
		<!-- <picker-view class="flex-1 flexr justify-space-around">
			<picker-view-column class="picker-column">
				<view class="picker-row" v-for="(item, index) in 10" :key="index">
					2021年
				</view>
			</picker-view-column>
			<picker-view-column class="picker-column">
				<view class="picker-row" v-for="(item, index) in 10" :key="index">
					2021年
				</view>
			</picker-view-column>
			<picker-view-column class="picker-column">
				<view class="picker-row" v-for="(item, index) in 10" :key="index">
					2021年
				</view>
			</picker-view-column>
		</picker-view> -->
		<view class="picker-list flex-1 flexc">
			<view class="picker-item flexr align-center active" v-for="(item, index) in 10" :key="index">
				<image class="picker-item-icon" src="@/static/applogo.png"></image>
				<view class="flex-1 flexc item-text">
					<view class="name">
						兰陵王
					</view>
					<view class="phone">
						121212122121
					</view>
				</view>
				<image class="check" src="@/static/check.png"></image>
			</view>
		</view>
		<view class="btns flexr justify-center">
			<view class="btn cancel-button" @click="emits('onCancel')">
				取消
			</view>
			<view class="btn primary-button" @click="emits('onConfirm')">
				确定
			</view>
		</view>
	</view>
</template>

<script setup>
const emits = defineEmits(['onCancel', 'onConfirm'])
</script>

<style lang="scss">
.my-picker {
	height: 880rpx;
	box-sizing: border-box;
	background-color: white;
	overflow: hidden;
	border-top-right-radius: 30rpx;
	border-top-left-radius: 30rpx;
	.picker-title {
		height: 112rpx;
		background-color: rgba(250, 250, 250, 1);
		color: $text-color1;
		font-size: 32rpx;
		position: relative;
		margin-bottom: 20rpx;
		min-height: 112rpx;
		.close {
			width: 50rpx;
			height: 50rpx;
			padding: 10rpx;
			box-sizing: border-box;
			position: absolute;
			right: 25rpx;
			top: 0;
			bottom: 0;
			margin: auto;
		}
	}
	.picker-list {
		overflow-y: scroll;
	}
	.picker-item {
		height: 120rpx;
		min-height: 120rpx;
		padding: 0 32rpx;
		position: relative;
		&-icon {
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 10rpx;
		}
		.item-text {
			margin-left: 25rpx;
			padding-bottom: 10rpx;
			border-bottom: 1rpx solid $divider-color;
			.name {
				font-size: 32rpx;
				color: $text-color1;
			}
			.phone {
				margin-top: 8rpx;
				color: $text-color2;
			}
		}
		&.active {
			background-color: rgba(52, 181, 160, 0.08);
		}
		.check {
			width: 36rpx;
			height: 27rpx;
			position: absolute;
			right: 32rpx;
			top: 0;
			bottom: 0;
			margin: auto;
		}
	}
	.btns {
		margin-top: 20rpx;
		.btn {
			width: 300rpx;
		}
		.btn + .btn {
			margin-left: 30rpx;
		}
	}
}
</style>
